<template>
  <div class="banned">
    <page-header
      v-bind="bannedHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content ref="pageContentRef" v-bind="bannedContentConfig">
      <template #baseInfo="row">
        <div class="base-info">
          <el-button
            style="cursor: initial"
            size="small"
            text
            :type="userTypeColor(row.userType)"
            >{{ userTypeText(row.userType) }}
          </el-button>
          <div class="info">
            <div>用户名：{{ row.userName }}</div>
            <div>创建时间：{{ row.createTime }}</div>
            <div>解封时间：{{ row.unlockTime }}</div>
          </div>
        </div>
      </template>
      <template #delayTime="row">
        <template v-if="row[row.prop] === -1">
          <el-button size="small" plain type="danger">永久</el-button>
        </template>
        <template v-else>
          <el-button style="cursor: initial" size="small" text type="warning">
            {{ secondsToDay(row.delayTime) }}
          </el-button>
        </template>
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import bannedHeaderConfig from '@/views/main/system/banned/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import bannedContentConfig from '@/views/main/system/banned/config/content-config'
import usePageHeader from '@/hooks/use-page-header'
import { secondsToDay } from '@/utils/format'

// 计算属性
const userTypeText = computed(() => {
  return (num: number) => {
    let text
    num === 0 && (text = '用户')
    num === 1 && (text = '商户')
    num === 2 && (text = '管理员')
    return text
  }
})
const userTypeColor = computed(() => {
  return (num: number) => {
    let color
    num === 0 && (color = 'success')
    num === 1 && (color = 'danger')
    num === 2 && (color = 'warning')
    return color
  }
})

const { pageContentRef, searchClick, resetClick } = usePageHeader()
</script>

<style scoped lang="less">
.banned {
  .base-info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;

    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }
}
</style>
